<template>
    <div class="constainer">
        <div class="back">
            <div class="back-btn" @click="back">
                <svg
                    t="1639040254333"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2349"
                >
                    <path
                        d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
                        fill=""
                        p-id="2350"
                    ></path>
                </svg>
                <p>返回</p>
            </div>
            <!-- <h4>消息</h4> -->
        </div>
        <div class="header">
            <div
                @click="changeNav(index)"
                class="header-item"
                v-for="(item, index) in navData"
                :key="index"
                :class="navIndex == index ? 'active-header' : ''"
            >
                {{ item.nav }}
                <div class="num" v-if="index == 0 && UnreadLength">
                    {{ UnreadLength }}
                </div>
            </div>
        </div>
        <div class="list-constainer" ref="wrapper" v-if="navIndex == 0">
            <div class="list">
                <div
                    class="list-item"
                    v-for="(item, index) in UnreadData"
                    :key="index"
                    @click="showText(item.id)"
                >
                    <div
                        class="list-state"
                        :class="item.msgtype == '已读' ? '' : 'redstate'"
                    ></div>
                    <div class="list-item-header">
                        <div class="list-item-content">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="list-item-bottom">
                        <!-- <div class="list-item-bottom-text">
                            {{ item.creater }}
                        </div> -->
                        <div class="list-item-bottom-text">
                            {{ item.edit_time }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-constainer" ref="wrapper" v-if="navIndex == 1">
            <div class="list">
                <div
                    class="list-item"
                    v-for="(item, index) in ReadData"
                    :key="index"
                    @click="showText(item.id)"
                >
                    <div
                        class="list-state"
                        :class="item.msgtype == '已读' ? '' : 'redstate'"
                    ></div>
                    <div class="list-item-header">
                        <div class="list-item-content">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="list-item-bottom">
                        <!-- <div class="list-item-bottom-text">
                            {{ item.creater }}
                        </div> -->
                        <div class="list-item-bottom-text">
                            {{ item.edit_time }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-constainer" ref="wrapper" v-if="navIndex == 2">
            <div class="list">
                <div
                    class="list-item"
                    v-for="(item, index) in listData"
                    :key="index"
                    @click="showText(item.id)"
                >
                    <div
                        class="list-state"
                        :class="item.msgtype == '已读' ? '' : 'redstate'"
                    ></div>
                    <!-- <div class="list-state redstate" v-else></div> -->
                    <div class="list-item-header">
                        <div class="list-item-content">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="list-item-bottom">
                        <!-- <div class="list-item-bottom-text">
                            {{ item.creater }}
                        </div> -->
                        <div class="list-item-bottom-text">
                            {{ item.edit_time }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <transition name="fade">
            <Details
                v-if="isText"
                @close="close"
                :textData="textData"
            ></Details>
        </transition>
    </div>
</template>

<script>
import Details from "./Details.vue";
import BScroll from "better-scroll";
import miment from "miment";
import api from "../api/api";
export default {
    name: "App",
    components: {
        Details,
    },
    data() {
        return {
            navData: [
                {
                    nav: "未读",
                },
                {
                    nav: "已读",
                },
                {
                    nav: "全部",
                },
            ],
            navIndex: 2,
            isText: false, //是否显示内容
            listBScroll: null,
            listData: [], //全部数据
            ReadData: [], //已读
            UnreadData: [], //未读
            textData: {}, //弹框数据
            UnreadPage: 1,
            ListPage: 1,
            ReadPage: 1,
            size: 10,
            UnreadLength: null,
            ismore: false,
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        // nav切换
        changeNav(i) {
            this.navIndex = i;
            this.UnreadData = [];
            this.ReadData = [];
            this.listData = [];
            if (this.navIndex == 0) {
                this.getUnreadData();
            } else if (this.navIndex == 1) {
                this.getReadData();
            } else {
                this.getListData();
            }
        },
        //显示弹框
        showText(id) {
            this.isText = true;
            api.get(`/getByid/${id}`).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    res.data.data.create_time = miment(
                        res.data.data.create_time
                    ).format("YYYY-MM-DD  hh:mm:ss");

                    this.textData = res.data.data;
                    console.log(res.data.data.msgtype);
                    if (res.data.data.msgtype == null) {
                        api.post(`/updateStatus/${id}`).then((r) => {
                            if (r.data.code == 200) {
                                res.data.data.msgtype = "已读";
                                if (this.navIndex == 0) {
                                    this.UnreadData.map((item, i, arr) => {
                                        if (item.id == id) {
                                            item.msgtype = "已读";
                                            arr.splice(i, 1);
                                        }
                                        return arr;
                                    });
                                } else {
                                    this.listData.map((item) => {
                                        if (item.id == id) {
                                            item.msgtype = "已读";
                                        }
                                    });
                                }
                            }
                        });
                    }
                } else {
                    console.log("请求失败");
                }
            });
        },
        //关闭弹框
        close() {
            this.isText = false;
        },
        //初始化滑动
        initSrcoll() {
            this.listBScroll = new BScroll(this.$refs.wrapper, {
                click: true,
                scrollY: true,
                probeType: 3,
                pullUpLoad: {
                    threshold: -100, // 当上拉距离超过50px时触发 pullingUp 事件
                },
            });

            this.listBScroll.on("pullingUp", () => {
                this.listBScroll.finishPullUp();
                if (this.navIndex == 0) {
                    this.getUnreadData_();
                } else if (this.navIndex == 1) {
                    this.getReadData_();
                } else {
                    this.getListData_();
                }
                setTimeout(() => {
                    this.listBScroll.refresh();
                }, 500);
            });
        },
        //获取未读列表长度
        getLength() {
            api.get(`/getlength/${this.$store.state.loginname}`).then((res) => {
                // console.log(res.data.data);
                this.UnreadLength = res.data.data;
                if (res.data.data >= 100) {
                    this.UnreadLength = 99 + "+";
                }
            });
        },
        //获取全部数据
        getListData() {
            this.ListPage = 1;
            api.get(
                `/testFindAll/${this.ListPage}/${this.size}/${this.$store.state.loginname}`
            ).then((res) => {
                if (res.data.code == 200 && res.data.data.length > 0) {
                    console.log(res.data);
                    res.data.data.forEach((item) => {
                        item.edit_time = miment(item.edit_time).format(
                            "YYYY-MM-DD  hh:mm:ss"
                        );
                    });
                    this.listData = res.data.data;
                } else {
                    console.log("请求失败");
                }
            });
        },
        // 获取已读数据
        getReadData() {
            this.ReadPage = 1;
            api.get(
                `/getmsgtype/${this.$store.state.loginname}/${this.ReadPage}/${this.size}`
            ).then((res) => {
                if (res.data.code == 200) {
                    res.data.data.forEach((item) => {
                        item.edit_time = miment(item.edit_time).format(
                            "YYYY-MM-DD  hh:mm:ss"
                        );
                    });
                    this.ReadData = res.data.data;
                } else {
                    console.log("请求失败");
                }
            });
        },
        // 获取未读数据
        getUnreadData() {
            this.UnreadPage = 1;
            api.get(
                `/getstatus/${this.$store.state.loginname}/${this.UnreadPage}/${this.size}`
            ).then((res) => {
                if (res.data.code == 200) {
                    // console.log(res);
                    res.data.data.forEach((item) => {
                        item.edit_time = miment(item.edit_time).format(
                            "YYYY-MM-DD  hh:mm:ss"
                        );
                    });
                    this.UnreadData = res.data.data;
                } else {
                    console.log("请求失败");
                }
            });
        },
        //全部分页累加
        getListData_() {
            this.ListPage += 1;
            api.get(
                `/testFindAll/${this.ListPage}/${this.size}/${this.$store.state.loginname}`
            ).then((res) => {
                // console.log(res.data);
                if (res.data.code == 200) {
                    if (res.data.data.length > 0) {
                        res.data.data.forEach((item) => {
                            item.edit_time = miment(item.edit_time).format(
                                "YYYY-MM-DD  hh:mm:ss"
                            );
                            this.listData.push(item);
                        });
                    } else {
                        console.log("没有数据了");
                    }
                } else {
                    console.log("请求失败");
                }
            });
        },
        //已读分页累加
        getReadData_() {
            this.ReadPage += 1;
            api.get(
                `/getmsgtype/${this.$store.state.loginname}/${this.ReadPage}/${this.size}`
            ).then((res) => {
                // console.log(res);
                if (res.data.code == 200) {
                    if (res.data.data.length > 0) {
                        res.data.data.forEach((item) => {
                            item.edit_time = miment(item.edit_time).format(
                                "YYYY-MM-DD  hh:mm:ss"
                            );
                            this.ReadData.push(item);
                        });
                    } else {
                        console.log("没有数据了");
                    }
                } else {
                    console.log("请求失败");
                }
            });
        },
        //未读分页累加
        getUnreadData_() {
            this.UnreadPage += 1;
            api.get(
                `/getstatus/${this.$store.state.loginname}/${this.UnreadPage}/${this.size}`
            ).then((res) => {
                if (res.data.code == 200) {
                    console.log(res.data);
                    if (res.data.data.length > 0) {
                        res.data.data.forEach((item) => {
                            item.edit_time = miment(item.edit_time).format(
                                "YYYY-MM-DD  hh:mm:ss"
                            );
                            this.UnreadData.push(item);
                        });
                    } else {
                        console.log("没有数据了");
                    }
                } else {
                    console.log("请求失败");
                }
            });
        },

        //获取url参数
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            console.log(window.location.search);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return false;
        },
    },
    //数据更新重新初始化滑动
    watch: {
        listData() {
            this.$nextTick(() => {
                this.initSrcoll();
            });
        },
        UnreadData() {
            this.$nextTick(() => {
                this.initSrcoll();
            });
        },
        ReadData() {
            this.$nextTick(() => {
                this.initSrcoll();
            });
        },
    },
    mounted() {
        this.$store.state.loginname = this.getQueryVariable("loginname");
        console.log(this.$store.state.loginname);
    },
    created() {
        this.getListData();
        this.getLength();
    },
};
</script>
<style lang="less" scoped>
.constainer {
    .back {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        position: relative;
        .back-btn {
            position: absolute;
            left: 44px;
            display: flex;
            align-items: center;
            .icon {
                width: 32px;
                height: 32px;
            }
            p {
                font-size: 24px;
            }
        }
        h4 {
            font-size: 32px;
        }
    }
    .header {
        display: flex;
        padding: 30px 0;
        background: #fff;
        border-radius: 0 0 30px 30px;
        .header-item {
            font-size: 30px;
            font-weight: bold;
            margin-left: 44px;
            color: #000;
            position: relative;
            .num {
                padding: 1px 4px;
                position: absolute;
                top: -20px;
                right: -30px;
                text-align: center;
                line-height: 24px;
                font-size: 16px;
                color: #fff;
                min-width: 26px;
                min-height: 24px;
                background: rgba(243, 16, 16, 0.8);
                border-radius: 30px;
            }
        }
        .active-header {
            color: rgb(7, 121, 187);
            &::after {
                content: "";
                width: 100%;
                height: 3px;
                border-radius: 6px;
                background: rgb(7, 121, 187);
                position: absolute;
                bottom: -14px;
                left: 0;
            }
        }
    }
    .list-constainer {
        height: calc(100vh - 180px);
        overflow: hidden;
        box-sizing: border-box;
        .list {
            padding: 32px 10px;
            .list-item {
                height: 170px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                margin-bottom: 32px;
                background: #fff;
                border-radius: 10px;
                overflow: hidden;
                &:last-child {
                    margin-bottom: 0;
                }
                .list-state {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 14px;
                    height: 100%;
                    background: rgb(34, 172, 56);
                }
                .redstate {
                    background: red;
                }
                .list-item-header {
                    display: flex;
                    padding: 0 44px;
                    padding-top: 20px;
                    .list-item-content {
                        font-size: 32px;
                        letter-spacing: 2px;
                        color: #000;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2; //当属性值为3，表示超出3行隐藏
                    }
                }
                .list-item-bottom {
                    display: flex;
                    align-items: center;
                    padding: 20px 44px;

                    // .list-item-bottom-avatar {
                    //     width: 32px;
                    //     height: 32px;
                    //     img {
                    //         width: 100%;
                    //         height: 100%;
                    //         border-radius: 6px;
                    //     }
                    // }
                    .list-item-bottom-text {
                        font-size: 24px;
                        color: rgb(162, 162, 162);
                        margin-right: 20px;
                    }
                }
            }
        }
    }
    .more {
        position: fixed;
        bottom: 20px;
        left: 0;
        width: 100%;
        font-size: 24px;
        text-align: center;
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateX(100%);
    opacity: 0;
}
.fade-enter-from {
    transform: translateX(100%);
    opacity: 0;
}
.fade-enter-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translateX(0);
    opacity: 1;
}
</style>
